<template>
	<view class="page">
		<view class="bg-white">
			<up-tabs :list="list1" :scrollable="false" @click="tabClick"></up-tabs>
		</view>
		<view class="padding" v-if="currentTab === 0">
			<view class="margin-bottom radius-lg bg-white" v-for="item in knowledgeList" :key="item.id"
				@click="handleMistakeDetailClick(item)">
				<view class="flex align-center justify-between gap padding">
					<view class="flex-1">
						<view>
							<u-text :text="item.name" size="32rpx" color="#333"></u-text>
						</view>
						<view class="flex">
							<u-text :text="`错误人数：${item.count}`" size="28rpx" color="#999"></u-text>
							<u-text align="right" :text="`错误率：${item.mistakeRate}%`" size="28rpx" color="#999"></u-text>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="padding" v-if="currentTab === 1">
			<view class="margin-bottom radius-lg bg-white" v-for="item in knowledgeList" :key="item.id"
				@click="handleMistakeDetailClick(item)">
				<view class="flex align-center justify-between gap padding">
					<view class="flex-1">
						<view>
							<u-text :text="item.name" size="32rpx" color="#333"></u-text>
						</view>
						<view class="flex">
							<u-text :text="`错误人数：${item.count}`" size="28rpx" color="#999"></u-text>
							<u-text align="right" :text="`错误率：${item.mistakeRate}%`" size="28rpx" color="#999"></u-text>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue';

const currentTab = ref(0)
// 创建响应式数据  
const list1 = reactive([
	{ name: '未生成' },
	{ name: '已生成' },
]);

// 知识点
const knowledgeList = ref([
	{
		id: 1,
		name: '时分秒的换算',
		count: 10,
		mistakeRate: 30
	},
	{
		id: 2,
		name: '10以内加减法',
		count: 10,
		mistakeRate: 30
	},
	{
		id: 3,
		name: '10以内乘除',
		count: 10,
		mistakeRate: 30
	}
]);

const handleMistakeDetailClick = (item) => {
	console.log('item', item)
	uni.navigateTo({
		url: `/pages/teacher/createExercise/previewMistakeInfo?id=${item.id}`
	})
}


const tabClick = (index) => {
	console.log('index', index)
	currentTab.value = index.index
}
</script>